<template>
    <div>
        <el-dialog :title="$t('appVerManage.appUpload')" v-model="visible" height="2000" width="600"
            :close-on-click-modal="false" draggable>
            <!--表单-->
            <el-form :model="state.queryForm" ref="queryRef" :inline="true" label-width="auto">
                <el-form-item :label="$t('appVerManage.versionNo')" prop="version">
                    <el-input v-model="state.queryForm.version" />
                </el-form-item>
                <el-form-item :label="$t('appVerManage.appFile')" prop="appFile">
                <el-input v-model="state.queryForm.appFile" style="width: 485px" clearable disabled
                    :placeholder="$t('appVerManage.selectFile')" >
                    <template #append>
                        <el-upload
                            ref="uploadRef"
                            class="upload-demo"
                            :headers="headers"
                            action='/api/wms/appVersionManage/UploadFile'
                            :show-file-list="false"
                            :auto-upload="false"
                            :data="setData"
                            :on-success="handleSuccess"
                            :on-change="handleFileChange">
                            <template #trigger>
                            <el-button type="primary">{{ $t('appVerManage.select') }}<el-icon><Select /></el-icon></el-button>
                            </template>
                        </el-upload>
                    </template>
                </el-input>
            </el-form-item>
                <el-form-item :label="$t('appVerManage.remark')" prop="remark">
                     <el-input v-model="state.queryForm.remark" style="width: 470px" :rows="5" type="textarea" placeholder="Please input remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="visible = false" icon = 'Close'>{{ $t('appVerManage.cancel') }}</el-button>
                    <el-button type="primary" @click="onSubmit"
                        :disabled="loading" icon = 'Check'>{{ $t('appVerManage.confirm') }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { UploadInstance } from 'element-plus'
import { BasicTableProps, useTable } from "/@/hooks/table";
import {useMessage} from "/@/hooks/message";
import { getNextVersion,submitAppVersion,uploadFileApp} from "/@/api/platform/digital/appVerManage";
import { defineAsyncComponent, nextTick, onMounted, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";
import {Session} from '/@/utils/storage';

const emits = defineEmits(['getChildren'])
const { t } = useI18n();
const textarea = ref('')
const uploadRef = ref<UploadInstance>()
const file = ref()
const queryRef = ref()
// 定义变量内容
const loading = ref(false);
const visible = ref(false);

/**
 * 计算请求头部信息
 */
 const headers = computed(() => {
  return {
    Authorization: 'Bearer ' + Session.getToken(),
    'TENANT-ID': Session.getTenant(),
  };
});

//获取文件名字
const handleFileChange = (event) => {
    if (!event.name.endsWith(".apk")) {
        useMessage().error(t('appVerManage.selectFile'));
        return false;
    }
    state.queryForm.appFile = event.name; 
    file.value = event.raw
}

//设置额外携带参数
const setData = () => {
    return {
        version:state.queryForm.version,
        remark:state.queryForm.remark === undefined ? "" : state.queryForm.remark
    }
}

//提交
const onSubmit = async () => {
    try 
    {
        loading.value = true;
        if(state.queryForm.appFile === undefined){
            useMessage().error(t('appVerManage.selectFile'));
            loading.value = false;
            return false;
        }
        if(state.queryForm.version === undefined){
            useMessage().error(t('appVerManage.versionIsNull'));
            loading.value = false;
            return false;
        }
        uploadRef.value!.submit()
    } catch (error:any) {
        loading.value = false;
        useMessage().error(error)
    }
}

//加载版本
const loadVersion = () => {
    getNextVersion().then(res => {
        state.queryForm.version = res.data
    })
}

//上传成功事件
const handleSuccess = (data:any,uploadFile: any) => {
    visible.value = false;

    if(data.msg != "null"){
        useMessage().error(data.msg);
    }else{
        useMessage().success(t('appVerManage.uploadSuccess'));
        emits('getChildren',loading);
    }
}

// 打开弹框
const openDialog = () => {
    loadVersion()
    visible.value = true;
    loading.value = false;
    // 重置表单数据
    nextTick(() => {
        queryRef.value?.resetFields();
    });
};

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: ""
})
const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

// 暴露变量
defineExpose({
    openDialog
});
</script>